<template>
    <div class="mail">
        <div class="head">
            <div class="li theme">{{ email.subject}}</div>
            <div class="li send">发件人：{{ email.from }}</div>
            <div class="li receive">收件人：{{ email.to }}</div>
            <div class="li time">时间：{{ email.date }}</div>
        </div>
        <div class="body">
            <div id="content" ref="content"></div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: 'MyMail',
    data() {
        return {
            http: 'https://localhost:7235',
            id: null,
            email: {
                subject: '',
                from: '',
                to: '',
                date: '',
                textBody: ''
            }
        }
    },
    methods: {
        selectById(id) {
            axios
                .get(`${this.http}/Emails/${id}`, {
                    params: {
                        addr: localStorage.getItem('addr'),
                        pass: localStorage.getItem('pass'),
                    },
                    headers: {
                        'Accept': 'text/plain',
                    }
                })
                .then((response) => {
                    this.email = response.data
                    console.log(this.email);
                    let container = document.createElement('div')
                    container.innerHTML = this.email.htmlBody
                    this.$refs.content.appendChild(container)
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
    mounted() {
        this.id = this.$route.params.id
        this.selectById(this.id)
    }
}
</script>

<style scoped>
.head {
    width: 100%;
    background-color: #f5f7fa;
    padding: 30px 50px;
}
.li {
    padding: 4px 6px;
    font-size: 14px;
    color: #4f4f4f;
}
.theme {
    font-size: 16px;
    color: #212121;
    font-weight: 600;
    margin-bottom: 5px;
}
.time {
    font-size: 12px;
}
.body {
    padding: 30px 50px;
}
</style>